import { Loader } from "@react-three/drei";
import { Canvas, Props } from "@react-three/fiber";
import { EffectComposer, Outline, Selection } from "@react-three/postprocessing";
import clsx from "clsx";
import { KernelSize } from "postprocessing";
import { DetailedHTMLProps, HTMLAttributes, Suspense } from "react";

export type UiCanvasProps = {
    outlineColor?: number
} & HTMLAttributes<HTMLDivElement> & Props


export function Canvas3d({ className, outlineColor, ...props }: UiCanvasProps) {
    return (
        <div className={className}>
            <Loader />
            <Canvas {...props}>
                <Suspense>
                    <Selection>
                        <EffectComposer autoClear={false}>
                            <Outline
                                resolutionScale={1}
                                kernelSize={KernelSize.MEDIUM}
                                edgeStrength={10}
                                visibleEdgeColor={outlineColor}
                                blur={true}
                                xRay={true}
                            />
                        </EffectComposer>
                        {props.children}
                    </Selection>
                </Suspense>
            </Canvas>
        </div>
    );
}